<template>
  <div class="container">
    <div class="title">
      设备分类
    </div>
    <div ref="bar" id="main5" style="width: 97%; height: 80%" v-show="barData.length > 0"></div>
    <div v-if="barData.length <= 0" class="no-warn-info">
      <img :src="wugj"/>
      <div>暂无设备</div>
    </div>
  </div>
</template>

<script>
// import { ququ } from "../../public/static/theme/ququ";
import * as echarts from "echarts";
// import * as echarts from 'echarts5';

import { mapState } from "vuex";
import {
  reqDeviceType,
} from "@api/apiDatav.js";

export default {
  props: {
  },
  data() {
    return {
      wugj: require("@assets/images/datav/wugj.png"),
      barChart: null,
      barData: [
        {
          name: "商家1",
          value: 12,
        },
        {
          name: "商家2",
          value: 22,
        },
        {
          name: "商家3",
          value: 10,
        },
        {
          name: "商家4",
          value: 32,
        },
        {
          name: "商家5",
          value: 25,
        },
        {
          name: "商家6",
          value: 16,
        },
        {
          name: "商家7",
          value: 52,
        },
        {
          name: "商家8",
          value: 33,
        },
        {
          name: "商家9",
          value: 19,
        },
        {
          name: "商家10",
          value: 36,
        },
        {
          name: "商家11",
          value: 24,
        },
        {
          name: "商家12",
          value: 42,
        },
        {
          name: "商家13",
          value: 29,
        },
        {
          name: "商家14",
          value: 33,
        },
      ],
      current: 1, // 当前页
      total: null, // 总页数
      timerId: null, // 定时器
    };
  },
  computed: {
    ...mapState(["user", "datav"]),
  },
  async mounted() {
    // await this.DeviceType()//接口真实数据
    // /**
    //  * 需求：
    //  * 1、对数据进行从小到大排序,分为5个一组
    //  * 2、每隔3S切换一组展示，页面销毁清除定时器
    //  * 3、当鼠标移入图表停止切换，鼠标移出开启切换
    //  */
    // this.init();
    // this.getData();
    // this.openTimer();
    // // 监听屏幕大小变化
    // window.addEventListener("resize", this.screenResize);
    // // 一进来主动调取屏幕适配
    // this.screenResize();
  },
  beforeDestroy() {
    clearInterval(this.timerId);
    window.removeEventListener("resize", this.screenResize);
  },
  methods: {
    // 产品类型
    async DeviceType() {
      this.barData = []
      let res = await reqDeviceType({
        tenantId: this.user.tenantId,
        orgId: '',
        spaceId: this.datav.buildingsArr.id,
        roleName:this.user.roleName,
        userId:this.user.userId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (res.data.row.length == 0) return;
      this.barData = res.data.row.map(item => {
        return {
          name: item.productName,
          value: item.count,
        }
      })

      /**
     * 需求：
     * 1、对数据进行从小到大排序,分为5个一组
     * 2、每隔3S切换一组展示，页面销毁清除定时器
     * 3、当鼠标移入图表停止切换，鼠标移出开启切换
     */
      this.init();
      this.getData();
      this.openTimer();
      // 监听屏幕大小变化
      window.addEventListener("resize", this.screenResize);
      // 一进来主动调取屏幕适配
      this.screenResize();

    },
    // 初始化图表
    init() {
      var chartDom = document.getElementById("main5");
      this.barChart = echarts.init(chartDom);

      // 拆分option：1、静态配置在初始化的时候先注册，每一次setOption是合并关系
      let initOption = {
        // 标题
        // title: {
        //   text: "▍横向柱状图", // ▍ 任意打一个字，调出搜狗输入法卡片，右键单击——表情符号——符号大全
        //   left: 40,
        //   top: 40,
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        color: ['#09E2F8'],//颜色
        // 坐标轴
        grid: {
          top: "10%",
          left: "10%",
          right: "8%",
          bottom: "0",
          containLabel: true, //是否包含坐标轴的文字
        },
        // X轴：横向柱状图，将xAxis的type设置为value
        xAxis: {
          type: "value",
          minInterval: 1,//不允许出现小数位
          min: 0,//坐标轴刻度最小值。
          // max:3,//坐标轴刻度最大值。
          //设置坐标轴字体颜色和宽度
          axisLine: {  //这是x轴文字颜色
            show: false,// 单独隐藏坐标线
            lineStyle: {
              color: "#fff",
            }
          },
          //网格线
          splitLine: {
            show: true, //隐藏或显示
            lineStyle: {
              type: 'dashed'//设置网格线类型 dotted：虚线 solid:实线
            }
          },
          // 单独隐藏刻度线
          axisTick: {
            show: false
          },
          // min:1,
          // minInterval:1,
        },
        // Y轴：横向柱状图，将xAxis的type设置为category
        yAxis: {
          type: "category",

          // 单独隐藏刻度线
          axisTick: {
            show: false,
          },
          // 单独隐藏坐标线
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",//文字颜色 以及坐标线颜色
            } // 样式
          },
          axisLabel: {
            show: true,
            inside: true,
            interval: 0, //横轴信息全部显
            splitNumber: 50,
            // boundaryGap: [20, 20],
            textStyle: {
              color: '#FFF',
              verticalAlign: 'bottom',
              fontSize: 12,
              align: 'left',
              padding: [0, 0, 5, 0]
            }
          },
        },
        // 图表内容
        series: [
          {
            type: "bar", // 图表类型
            // 柱上面的数值配置
            label: {
              show: true, // 显示值
              position: "right", // 显示位置
              color: "white",
            },
            // 每一个条目的样式配置
            // itemStyle: {
            //   // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
            //   color: new LinearGradient(0, 0, 1, 0, [
            //     { offset: 0, color: "#5050ee" },
            //     { offset: 1, color: "#ab6ee5" },
            //   ]),
            // },
          },
        ],
        // 提示框设置
        tooltip: {
          trigger: "axis", //触发类型——坐标轴
          // 鼠标移入条目下面的背景
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "rgba(225,225,225,.3)",
            },
          },
        },
      };
      this.barChart.setOption(initOption);
      // 监听鼠标移入移出事件
      this.barChart.on("mouseover", (params) => {
        // console.log(params);
        clearInterval(this.timerId);
      });
      this.barChart.on("mouseout", () => {
        this.openTimer();
      });
    },
    // 获取并处理数据，然后渲染图表
    getData() {
      // 排序
      this.barData = this.barData.sort((a, b) => a.value - b.value);
      // 总页数
      this.total =
        this.barData.length % 5 == 0
          ? this.barData.length / 5
          : parseInt(this.barData.length / 5) + 1;
      // 当前显示的5条数据
      let list = this.barData.slice((this.current - 1) * 5, this.current * 5);
      // 当前X、Y轴数据
      let barDataY = list.map((item) => item.name);
      let barDataX = list.map((item) => item.value);

      // 拆分option：2、data配置在获取导数据的时候注册，每一次setOption是合并关系
      let dataOption = {
        // Y轴：横向柱状图，将xAxis的type设置为category
        yAxis: {
          data: barDataY,
        },
        // 图表内容
        series: [
          {
            data: barDataX, // 数据
            // itemStyle: {
            //   normal: {
            //     //这里是重点
            //     color: function (params) {
            //       //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色  , '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'
            //       var colorList = ['#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8','#09E2F8'];
            //       return colorList[params.dataIndex]
            //     }
            //   }
            // }
          },
        ],
      };
      // 生成图表
      this.barChart.setOption(dataOption);
    },
    // 定时切换当前展示页码
    openTimer() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        if (this.current < this.total) {
          this.current++;
        } else {
          this.current = 1;
        }
        this.getData();
      }, 5000);
    },
    // 监听屏幕变化
    screenResize() {
      this.$nextTick(() => {
        // 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸
        let width = this.$refs.bar.offsetWidth;
        let size = (width / 100) * 2.6; // 定义一个基准尺寸

        // 拆分option：3、受屏幕大小影响的配置在屏幕改变的时候set
        let screenOption = {
          // 标题
          title: {
            textStyle: {
              fontSize: size, //标题大小
            },
          },
          // 图表内容
          series: [
            {
              barWidth: size, // 柱的宽度
              // 每一个条目的样式配置
              // itemStyle: {
              //   barBorderRadius: [0, size / 2, size / 2, 0], // 圆角
              // },
            },
          ],
          // 提示框设置
          tooltip: {
            // 鼠标移入条目下面的背景
            axisPointer: {
              lineStyle: {
                width: size,
              },
            },
          },
        };
        this.barChart.setOption(screenOption);
        // 更新图表
        this.barChart.resize();
      });
    },
  },
};
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~'@{vh}vh';
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}:~"@{vw}vw";
}

.container {
  height: 100%;
  width: 100%;

  .title {
    .height(43);
    width: 58%;
    margin: 0 auto;
    .fontSize(16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../../../assets/images/datav/head.png") no-repeat;
    background-size: 100% 100%;
    font-weight: 600
  }


}

::v-deep .el-progress__text {
  font-size: 17px !important;
}

.progress {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 66%;
}

.no-warn-info {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin-top: 1.5%;
  color: #fff;
  font-size: 0.7vw;

  >img {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
  }
}
</style>